<!-- 初设及概算方案批复 弹窗 -->
<template>
  <div>
    <el-dialog
      :title="title"
      :visible.sync="showDialog"
      :before-close="cancel"
      width="628px"
      append-to-body
      custom-class="dialog-box"
    >
      <el-form
        ref="queryParams"
        :model="queryParams"
        :rules="rules"
        label-width="158px"
      >
        <el-form-item label="初设及概算方案批复" prop="approvalAnnex.fileName">          
          <div class="files_upload_box" @click="handleImport">
            <el-input
              v-model="queryParams.approvalAnnex.fileName"
              placeholder="请选择文件"
              style="width: 100%;"
            />
            <div class="img_box">
              <img
                src="@/assets/images/tripartite/icon_files_upload.png"
                alt=""
              />
            </div>
          </div>
        </el-form-item>
        <!-- <el-form-item label="区财政局审批结果" prop="approvalFinance.fileName" class="last-form-item">
          <div class="files_upload_box" @click="handleImportTwo">
            <el-input
              v-model="queryParams.approvalFinance.fileName"
              placeholder="请选择文件"
              style="width: 100%;"
            />
            <div class="img_box">
              <img
                src="@/assets/images/tripartite/icon_files_upload.png"
                alt=""
              />
            </div>
          </div>
        </el-form-item> -->
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 文件上传对话框 区发改委-->
    <el-dialog
      :title="upload.title"
      :visible.sync="upload.open"
      width="498px"
      append-to-body
      custom-class="dialog-box"
    >
      <el-upload
        ref="upload1"
        :limit="1"
        accept=".jpg, .png, .pdf, .zip, .rar, .7z"
        :headers="upload.headers"
        :action="upload.url + '?updateSupport=' + upload.updateSupport"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将文件拖到此处，或
          <em>点击上传</em>
        </div>
        <div class="el-upload__tip" style="color: red" slot="tip">
          提示：仅允许导入".jpg, .png, .pdf, .zip, .rar, .7z"格式文件！
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>
    <!-- 文件上传对话框 区财政局-->
    <el-dialog
      :title="upload.title"
      :visible.sync="upload.openTwo"
      width="498px"
      append-to-body
      custom-class="dialog-box"
    >
      <el-upload
        ref="upload2"
        :limit="1"
        accept=".jpg, .png, .pdf, .zip, .rar, .7z"
        :headers="upload.headers"
        :action="upload.url + '?updateSupport=' + upload.updateSupport"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgressTwo"
        :on-success="handleFileSuccessTwo"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将文件拖到此处，或
          <em>点击上传</em>
        </div>
        <div class="el-upload__tip" style="color: red" slot="tip">
          提示：仅允许导入".jpg, .png, .pdf, .zip, .rar, .7z"格式文件！
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileFormTwo">确 定</el-button>
        <el-button @click="upload.openTwo = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getToken } from "@/utils/auth";
import { addFinance ,updateFinance ,getFinance} from "@/api/projectCompany/myProject";

export default {
  name: "SendToApprovaDialog",
  props: {
    showDialog: {
      type: Boolean,
      default: false,
    },
    proId:{
      type: String,
      default: ''
    },
    rowData: {
      type: Object,
      default:()=>{}
    }
  },
  inject:['reload'],
  data() {
    return {
      // 弹出层标题
      title: "初设及概算方案批复",
      // 表单参数
      queryParams: { approvalAnnex: {fileName:'',fileUrl:''} ,approvalFinance:{fileName:'',fileUrl:''}},
      // 表单校验
      rules: {
        'approvalAnnex.fileName': [
          { required: true, message: "审批结果不能为空", trigger: "change" },
        ],
        // 'approvalFinance.fileName': [
        //   { required: true, message: "审批结果不能为空", trigger: "change" },
        // ],
      },
      // 上传文件参数
      upload: {
        // 是否显示弹出层（用户导入）
        open: false,
        openTwo:false,
        // 弹出层标题（用户导入）
        title: "",
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: "Bearer " + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + "/file/upload",
        // 上传文件名称
        fileName: "请选择文件",
        fileName2: "请选择文件",
      },
      // 查询参数对应id
      relationId:undefined,
    };
  },
  watch:{
      showDialog(val){
        console.log('监听发改',val);
          this.relationId = this.rowData.relationId
          if(val==true && this.relationId && this.relationId !=null){
              this.getView()
          }
      },
  },
  methods: {
    getView(){
      this.relationId = this.rowData.relationId
      if(this.relationId && this.relationId !=null){
        getFinance(this.relationId).then(res=>{
            if(res){
                if( res.approvalAnnexFile && res.approvalAnnexFile!=null){
                  this.queryParams.approvalAnnex=res.approvalAnnexFile
                }else{
                  this.queryParams.approvalAnnex={fileName:'',fileUrl:''}
                }
                if( res.approvalFinanceFile && res.approvalFinanceFile!=null){
                  this.queryParams.approvalFinance=res.approvalFinanceFile
                }else{
                  this.queryParams.approvalFinance={fileName:'',fileUrl:''}
                }
            }
        })
      }      
    },
    /** 表单重置 */
    reset(){
      this.queryParams={ 
        approvalAnnex: {fileName:'',fileUrl:''} ,
        approvalFinance:{fileName:'',fileUrl:''}
        }
      this.resetForm("queryParams");
    },
    /** 取消按钮 */
    cancel() {
      this.$emit("changeShowDialog", "false"); //调用父组件的自定义事件，并传值
      this.reset()
    },
    /** 确定按钮 */
    submitForm() {
      this.$refs["queryParams"].validate((valid) => {
        if (valid) {
          this.queryParams.proId=this.proId
          if (this.relationId == undefined || this.relationId == "") {
            addFinance(this.queryParams).then((response) => {
              this.msgSuccess("提交成功");
              this.reset()
              this.$emit("changeShowDialog", "false");
              this.reload();
            });
          } else {
            updateFinance(this.queryParams).then((response) => {
              this.msgSuccess("修改成功");
              this.reset()
              this.$emit("changeShowDialog", "false");
              this.reload();
            });
          }
        }
      });
    },
    /** 文件上传操作 区发改委*/
    handleImport() {
      this.upload.title = "附件";
      this.upload.open = true;
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true;
      console.log("文件上传中", file);
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      console.log("文件上传成功", response, file);
      this.upload.open = false;
      this.upload.isUploading = false;
      this.$refs.upload1.clearFiles();
      if(response.code!=500&&response.data){
        this.queryParams.approvalAnnex.fileName = file.name
        this.queryParams.approvalAnnex.fileUrl = response.data.fileUrl
        this.upload.fileName = file.name;
      }else{
        this.$message.error(response.msg)
      }
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload1.submit();
    },

    /** 文件上传操作 区财政局*/
    handleImportTwo() {
      this.upload.title = "附件";
      this.upload.openTwo = true;
    },
    // 文件上传中处理
    handleFileUploadProgressTwo(event, file, fileList) {
      this.upload.isUploading = true;
      console.log("文件上传中", file);
    },
    // 文件上传成功处理
    handleFileSuccessTwo(response, file, fileList) {
      console.log("文件上传成功", response, file);
      this.upload.openTwo = false;
      this.upload.isUploading = false;
      this.$refs.upload2.clearFiles();
      if(response.code!=500&&response.data){
        this.queryParams.approvalFinance.fileName = file.name
        this.queryParams.approvalFinance.fileUrl = response.data.fileUrl
        this.upload.fileName2 = file.name;
      }else{
        this.$message.error(response.msg)
      }
    },
    // 提交上传文件
    submitFileFormTwo() {
      this.$refs.upload2.submit();
    },
  },
};
</script>

<style lang="scss" scoped>
// 文件上传
.files_upload_box {
  .img_box {
    height: 36px;
    width: 36px;
    background: #0d72ff;
    text-align: center;
    border-radius: 0px 4px 4px 0px;
    position: absolute;
    right: -1px;
    top: -1px;
    img {
      width: 16px;
      height: 16px;
    }
  }
}
</style>
<style lang="scss">
/* 弹出窗样式 */
.dialog-box {
  .el-dialog__body {
    padding: 24px 69px 24px 69px;
    border-top: 1px solid #ebecef;
    border-bottom: 1px solid #ebecef;
    label {
      font-weight: 400 !important;
    }
    .last-form-item{
      margin-bottom: 0;
    }
  }
  .el-dialog__footer {
    padding: 16px 20px;
  }
  .el-dialog__headerbtn {
    background: url("../../../../assets/images/icon_dialog_close.png");
    background-size: 100%;
    width: 16px;
    height: 16px;
    .el-dialog__close {
      visibility: hidden;
    }
  }
}
</style>
